<%--
  Created by IntelliJ IDEA.
  User: DELL
  Date: 2020/11/14
  Time: 20:32
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>修改资料</title>
    <script src="/WebContent/JQuery/jquery-3.4.1.js" type="text/javascript"></script>
    <style type="text/css" rel="stylesheet">
        body{
            font-family: "楷体";
            font-size: 16px;
        }
        .all{
            width: 1100px;
            border: 2px solid rgb(97,166,0);
            margin: 0 auto;
            padding: 50px 30px;
            box-sizing: border-box;
        }
        .yheader{
            font-size: 18px;
            font-weight: 600;
            color: rgb(97,166,0);
            margin-bottom: 10px;
        }
        .content{
            width: 800px;
            margin: 0 auto;
            text-align: center;
        }
        .content table{
            margin: 0 auto;
        }
        .content tr{
            height: 30px;
        }
        .content tr th{
            width: 100px;
        }
        .content tr td{
            width: 300px;
            text-align: center;
        }
        td,input{
            padding: 0;
        }
        input{
            width: 250px;
            height: 30px;
            text-align: center;
            font-size: 16px;
            letter-spacing: 2px;
            border-radius: 20px;
            border: none;
            background: none;
        }
        select{
            width: 50px;
            height: 30px;
        }
        button{
            width: 80px;
            height: 25px;
            background: #0192e8;
            border: none;
            margin: 0 20px;
            color: white;
            font-size: 18px;
            border-radius: 10px;
            cursor: pointer;
        }
        button:hover{
            background: rgb(97,166,0);
        }
    </style>
</head>
<body>
<article class="all">
    <div class="yheader">当前位置&nbsp;&gt;&gt;&nbsp;修改个人信息</div>
    <form class="content" action="" onsubmit="return false">
        <table border="1" cellpadding="8">
            <input type="hidden" value="xg" name="datatype">
            <tr>
                <th>用户名</th>
                <td><input type="text" name="username" value="${requestScope.admin.adminUsername}" id="username"></td>
            </tr>
            <tr>
                <th>密码</th>
                <td><input type="password" id="password" name="password" value="${requestScope.admin.adminPassword}"></td>
            </tr>
            <tr>
                <th>邮件地址</th>
                <td><input type="text" id="email" name="email" value="${requestScope.admin.adminEmail}"></td>
            </tr>
            <tr>
                <th>注册日期</th>
                <td><input type="text" id="resitime" name="resitime" value="${requestScope.admin.adminRegisterTime}" readonly></td>
            </tr>
            <tr>
                <td colspan="2" class="button">
                    <button id="btn">修改</button>
                    <button type="reset">重置</button>
                </td>
            </tr>
        </table>
        <div id="tishi" class="tishi" style="width: 420px;height: 30px;line-height: 30px;margin: 0 auto;text-align: center">

        </div>
    </form>
    <script>
        $(document).ready(function () {
            var emailtest = true;
            //邮箱判断
            $("input#email").blur(function () {
                var sb = /^[0-9a-zA-Z]+@+[0-9a-zA-Z]+\.com(\.cn)?$/;
                if (sb.test($(this).val())) {
                    $("#tishi").html("<font style='color: green'>邮箱验证通过</font>");
                    emailtest = true;
                } else {
                    $("#tishi").html("<font style='color: red'>邮箱格式错误</font>");
                    emailtest = false;
                    return;
                }
            })


            //ajax提交修改数据
            $("#btn").click(function () {
                //表单提交验证
                $("form.content").submit(function () {
                    if (emailtest) {
                        //获得数据
                        var uname = $("#username").val();
                        var password = $("#password").val();
                        var email = $("#email").val();
                        var url = "username=" + uname + "&password=" + password + "&email=" + email;
                        //创建一个异步请求对象
                        var xmlHttp = new XMLHttpRequest();
                        //为异步请求对象绑定工作状态监听器
                        xmlHttp.onreadystatechange = function () {
                            //异步请求工作状态为4且状态码为200时
                            if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                                var data = xmlHttp.responseText;
                                if (data == "1") {
                                    alert("修改成功！");
                                    window.location.reload();
                                }else {
                                    $("#tishi").html("<font style='color: red'>修改失败！</font>");
                                }
                            }
                        }
                        //初始化异步请求对象
                        xmlHttp.open("post", "/SuperAdminServlet?type=xg&" + url, true);
                        //发送请求协议包
                        xmlHttp.send();
                    } else {
                        $("#tishi").html("<font style='color: red'>提交失败！请检查您的数据是否有误</font>");
                        return false;
                    }
                })
            })
        })
    </script>
</article>
</body>
</html>
